<template>
    <transition name='fadeIn'>
        <div id="release">
            <my-header fixed title='微头条'>
                <a slot='left' @click="$router.go(-1)">取消</a>
                <a slot='right' @click="releaseTap">发布</a>
            </my-header>
            <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
                <div class="container">
                    <textarea class="content_textarea" name="name" rows="8" cols="80" v-model='textarea' placeholder="分享新鲜事">
                    </textarea>
                    <div class="content_image_btn" @click="fileClick">
                      <img src="~@/assets/img/w_releBtn.png">
                    </div>
                    <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none">
                    <div class="upload_warp_img" v-show="imgList.length!=0">
                      <div class="upload_warp_img_div" v-for="(item , index) of imgList">
                        <div class="upload_warp_img_div_top">
                          <div class="upload_warp_img_div_text">
                            {{item.file.name}}
                          </div>
                          <img src="~@/assets/img/del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
                        </div>
                        <img :src="item.file.src">
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import { mapActions, mapMutations } from 'vuex'
export default {
    name: 'release',
    data() {
        return {
          textarea: '',
          imgList: [],
          imgArr: [],
          size: 0
        }
    },
    watch: {
    },
    methods: {
      ...mapMutations('login', [
          'set_isLogin'
      ]),
      ...mapActions('collect', [
          'post_upload_data',
          'post_topRelease_data'
      ]),
      fileClick () {
        document.getElementById('upload_file').click()
      },
      fileChange (el) {
        if (!el.target.files[0].size) return
        this.fileList(el.target.files)
        el.target.value = ''
      },
      fileList (files) {
        for (let i = 0; i < files.length; i++) {
          this.fileAdd(files[i])
        }
      },
      fileAdd (file) {
        this.size = this.size + file.size// 总大小
        let reader = new FileReader()
        reader.vue = this
        reader.readAsDataURL(file)
        reader.onload = function () {
          file.src = this.result
          this.vue.post_upload_data(file.src)
          .then(res => {
              if (res) {
                this.vue.$toast({ message: res.msg, duration: 2000 })
                 console.log(res)
                 let path = res.data.path
                 this.vue.imgArr.push(path)
              }
          })
          .catch(err => {
              console.log(err)
          })
          this.vue.imgList.push({
            file
          })
        }
      },
      fileDel (index) {
        this.size = this.size - this.imgList[index].file.size// 总大小
        this.imgList.splice(index, 1)
      },
      releaseTap () {
        let params = {
          content: this.textarea,
          resources: this.imgArr
        }
        this.post_topRelease_data(params)
        .then(res => {
            if (res) {
                this.$toast({ message: res.msg, duration: 2000 })
                this.$router.go(-1)
            }
        })
        .catch(err => {
            console.log(err)
        })
      }
    }
}
</script>
<style lang='stylus'>
#release {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    z-index: 1000;
    background : #ffffff;
    .content {
        background-color: #ffffff;
        .content_textarea {
           width: 100%;
           border: none;
           font-size: 16px;
           padding: 15px 20px;
        }
        textarea{
          outline:none
        }
        .content_image_btn {
          padding-left: 20px;
        }
    }
    .upload_warp_img_div_del {
      position: absolute;
      top: 6px;
      width: 16px;
      right: 4px;
    }

    .upload_warp_img_div_top {
      position: absolute;
      top: 0;
      width: 100%;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      text-align: left;
      color: #fff;
      font-size: 12px;
      text-indent: 4px;
    }

    .upload_warp_img_div_text {
      white-space: nowrap;
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .upload_warp_img_div img {
      max-width: 100%;
      max-height: 100%;
      vertical-align: middle;
    }

    .upload_warp_img_div {
      position: relative;
      height: 100px;
      width: 120px;
      border: 1px solid #ccc;
      margin: 0px 30px 10px 0px;
      float: left;
      line-height: 100px;
      display: table-cell;
      text-align: center;
      background-color: #eee;
      cursor: pointer;
    }

    .upload_warp_img {
      padding: 14px 0 0 14px;
      overflow: hidden
    }

    .upload_warp_text {
      text-align: left;
      margin-bottom: 10px;
      padding-top: 10px;
      text-indent: 14px;
      border-top: 1px solid #ccc;
      font-size: 14px;
    }

    .upload_warp_right {
      float: left;
      width: 57%;
      margin-left: 2%;
      height: 100%;
      border: 1px dashed #999;
      border-radius: 4px;
      line-height: 130px;
      color: #999;
    }

    .upload_warp_left img {
      margin-top: 32px;
    }

    .upload_warp_left {
      float: left;
      width: 40%;
      height: 100%;
      border: 1px dashed #999;
      border-radius: 4px;
      cursor: pointer;
    }

    .upload_warp {
      margin: 14px;
      height: 130px;
    }

    .upload {
      border: 1px solid #ccc;
      background-color: #fff;
      width: 650px;
      box-shadow: 0px 1px 0px #ccc;
      border-radius: 4px;
    }

    .hello {
      width: 650px;
      margin-left: 27%;
      text-align: center;
    }
}
</style>
